<template>
  <div>
      <header>
        <img src="../../assets/images/land.png" alt="">
    </header>
    <div class="reg_form">
                <ul>
                    <li>
                        <div><input type="text" class="inp" id="tel" placeholder="邮箱/手机号码/小米ID:" v-model.trim="xiaomiid">
                        <span class=""></span></div>
                    </li>
                    <li>
                        <div>
                            <input type="password" class="inp" id="pwd" placeholder="请输入密码：" v-model.trim="xiaomipwd">
                            <p class=""></p>
                        </div>
                    </li>
                    <li class="agree"><input type="checkbox" name="" id="" v-model="isAgree">
                        已阅读并同意小米账号 <a href="#">《用户协议》</a>和<a href="javascript:;">《隐私政策》</a></li>
                    <li :class="{blue:xiaomiid && xiaomipwd && isAgree}" @click="enter">登录</li>
                </ul>
                <span>注：不用注册也可直接登录</span>
            </div>
  </div>
</template>

<script>

export default {
    name:'land',
    data() {
        return {
            xiaomiid:'',
            xiaomipwd:'',
            isAgree:'false'
        }
    },
    methods: {
        enter(){
            if(this.xiaomiid && this.xiaomipwd && this.isAgree)
            localStorage.setItem('xiaomiid',this.xiaomiid)
            localStorage.setItem('xiaomipwd',this.xiaomipwd)
            localStorage.setItem('isAgree',this.isAgree)
            this.$router.go(-1)
        }
    },
    mounted() {
        this.xiaomiid = localStorage.getItem('xiaomiid')
        this.xiaomipwd = localStorage.getItem('xiaomipwd')
        this.isAgree = localStorage.getItem('isAgree')
    },
}
</script>


<style scoped>
    header img {
        width: 100%;
    }
    ul{
        padding: 0 1.112rem ;
    }
    ul li{
        margin-bottom: 1rem;
        border-radius: .72rem;
        overflow: hidden;
    }
    ul li div {
        box-sizing: border-box;
        height: 2.22rem;
        width: 12.75rem;
        background-color: #eee;
        padding: .5rem .6rem;
    }
    ul li div input{
        width: 11.5rem;
        height: 1.24rem;
        font-size: .6rem;
        border-style: none;
        background-color: #eee;
    }
    .agree{
        border-radius: 0px;
    }
    ul li a {
        color: #0B84FF;
    }
    .agree input{
    vertical-align: middle;
    }
    ul li:last-child{
        height: 1.944rem;
        font-size: .72rem;
        color: rgba(255, 255, 255, 0.7);
        background-color: rgba(11, 132, 255, 0.3);
        line-height: 1.944rem;
        text-align: center;
    }
    .blue{
        background-color: #0B84FF !important;
    }
    .reg_form span {
        margin-left: 1.5rem;
        color: #999;
    }
</style>